{extend name='table'}

{block name="content"}
<div class="layui-tab layui-tab-card">
    <div class="layui-tab-content">
        <form action="" method="post" class="layui-form layui-card layui-form-pane" autocomplete="off" lay-filter="print_search" onsubmit="return false;">
            <div class="layui-col-md5">
                <input type="text" name="express_no" placeholder="请输入快递单号或者合箱单号" class="layui-input" id="search_express_no">
            </div>
            <div class="layui-btn-container layui-col-md5">
                <button class="layui-btn layui-btn-normal" lay-on="get-search">搜索</button>
            </div>
            <div class="layui-row">
                <fieldset class="layui-elem-field">
                    <legend>订单信息</legend>
                    <div class="layui-field-box">
                        <div class="layui-row">
                            <div class="layui-col-md6 layui-padding-2">
                                <span class="layui-inline" style="width: 100px;text-align: right;">寄往国家：</span>
                                <span class="layui-inline" name="country"></span>
                            </div>
                            <div class="layui-col-md6 layui-padding-2">
                                <span class="layui-inline" style="width: 100px;text-align: right;">仓储：</span>
                                <span class="layui-inline" name="warehouse_name"></span>
                            </div>
                            <div class="layui-col-md6 layui-padding-2">
                                <span class="layui-inline" style="width: 100px;text-align: right;">渠道：</span>
                                <span class="layui-inline" name="channel_name"></span>
                            </div>
                            <div class="layui-col-md6 layui-padding-2">
                                <span class="layui-inline" style="width: 100px;text-align: right;">快递名称：</span>
                                <span class="layui-inline" name="express_name"></span>
                            </div>
                            <div class="layui-col-md6 layui-padding-2">
                                <span class="layui-inline" style="width: 100px;text-align: right;">下单用户：</span>
                                <span class="layui-inline" name="buy_user"></span>
                            </div>
                            <div class="layui-col-md6 layui-padding-2">
                                <span class="layui-inline" style="width: 100px;text-align: right;">收货人名称：</span>
                                <span class="layui-inline" name="user_name"></span>
                            </div>
                            <div class="layui-col-md6 layui-padding-2">
                                <span class="layui-inline" style="width: 100px;text-align: right;">收货人电话：</span>
                                <span class="layui-inline" name="user_mobile"></span>
                            </div>
                            <div class="layui-col-md6 layui-padding-2">
                                <span class="layui-inline" style="width: 100px;text-align: right;">收货城市：</span>
                                <span class="layui-inline" name="user_city"></span>
                            </div>
                            <div class="layui-col-md6 layui-padding-2">
                                <span class="layui-inline" style="width: 100px;text-align: right;">收货地址：</span>
                                <span class="layui-inline" name="user_address"></span>
                            </div>
                            <div class="layui-col-md6 layui-padding-2">
                                <span class="layui-inline" style="width: 100px;text-align: right;">邮编：</span>
                                <span class="layui-inline" name="zip_code"></span>
                            </div>
                            <div class="layui-col-md6 layui-padding-2">
                                <span class="layui-inline" style="width: 100px;text-align: right;">发件人备注：</span>
                                <span class="layui-inline" name="user_remark"></span>
                            </div>
                            <div class="layui-col-md6 layui-padding-2">
                                <span class="layui-inline" style="width: 100px;text-align: right;">国际快递单号：</span>
                                <span class="layui-inline" name="foreign_express_no"></span>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="layui-row">
                <fieldset class="layui-elem-field">
                    <legend>商品信息</legend>
                    <div class="layui-field-box">
                        <div class="layui-row">
                            <table id="print_goods_list" lay-filter="print_goods_list"></table>
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="layui-row">
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label label-required-next">海外仓库</label>
                        <div class="layui-input-inline">
                          <select id="overseas_warehouse" name="overseas_warehouse" lay-filter="overseas_warehouse" lay-verify="required">
                            <option value="">请选择</option>
                          </select>
                        </div>
                    </div>
                </div>
                
                <div class="layui-col-md4">
                    <div class="layui-inline layui-form-item">
                        <label class="layui-form-label">长(cm)</label>
                        <div class="layui-input-inline">
                          <input type="number" name="length" class="layui-input">
                        </div>
                    </div>
                </div>
                
                <div class="layui-col-md4">
                    <div class="layui-inline layui-form-item">
                        <label class="layui-form-label">宽(cm)</label>
                        <div class="layui-input-inline">
                          <input type="number" name="wide" class="layui-input">
                        </div>
                    </div>
                </div>
                
                <div class="layui-col-md4">
                    <div class="layui-inline layui-form-item">
                        <label class="layui-form-label">高(cm)</label>
                        <div class="layui-input-inline">
                          <input type="number" name="height" class="layui-input">
                        </div>
                    </div>
                </div>
                
                <div class="layui-col-md5">
                    <div class="layui-inline layui-form-item">
                        <label class="layui-form-label label-required-next">总重量(kg)</label>
                        <div class="layui-input-inline">
                          <input type="number" name="total_weight" class="layui-input" lay-verify="required">
                        </div>
                        <div class="layui-form-mid" style="padding: 0!important;"> 
                            <button type="button" class="layui-btn layui-btn-normal" lay-on="get-weight">获取重量</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item text-center">
                <div class="layui-input-block">
                    <input type="hidden" name="express_id" value="">
                    <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="print">打印面单</button>
                </div>
            </div>
        </form>
    </div>
</div>
{/block}
{block name='script'}
<script>
    $(function () {
        let form = layui.form
        let table = layui.table
        let layer = layui.layer
        let goodsData = []
        $('#search_express_no').focus();
        table_goods_obj = table.render({
            elem: '#print_goods_list', page: true,data: goodsData,id: 'print_goods_data',lineStyle: 'height: 60px;',
            cols: [[
                {field:'image', minWidth:80, title: '图片', templet:"#imgTpl"},
                {field:'name', minWidth:200, title: '商品名称'},
                {field:'spec_value', minWidth:100, title: '商品规格'},
                // {field:'price', minWidth:80, title: '价格'},
                {field:'num', minWidth:80,title: '数量'},
                // {field:'weight', minWidth: 80, title: '重量(g)'}, 
                // {field:'length', minWidth: 80, title:'长(cm)'},
                // {field:'width', minWidth: 80, title:'宽(cm)'},
                // {field:'height', minWidth: 80, title:'高(cm)'},
            ]]
        });

        layui.use(['util'], function(){
            let util = layui.util;
            util.on({
                'get-search': function(){
                    getSearch()
                },
            });
        });

        form.on('submit(print)', function(data){
            let form_data = data.field
            httpRequest("{:sysuri('printSheet')}", form_data, 'post', function (info, res_data) {
                $.msg.success(info, 3, function () {
                    layer.open({
                        type: 2,
                        title: '打印面单',
                        area: ['700px', '400px'],
                        shade: 0,
                        closeBtn: 1,
                        shadeClose: false,
                        content: res_data.sheet_url || '', // 地址
                        end: function(){
                            window.location.reload()
                        }
                    });
                })
            })
        })

        function getSearch(){
            let form_data = form.val('print_search')
            let express_no = form_data.express_no
            if(!isNotEmpty(express_no)){
                $.msg.error('请输入快递单号或者合箱单号')
                return false
            }
            let data = {
                'express_no':express_no,
            };
            httpRequest("{:sysuri('searchOrder')}", data, 'post', function (info, res_data) {
                let orderData = res_data.order_info
                goodsData = res_data.pack_goods
                let pack_data = res_data.pack_info
                $.msg.success(info)
                $('span[name=country]').attr('cc_id', orderData.country_id).text(orderData.country);
                $('span[name=warehouse_name]').text(orderData.warehouse_name);
                $('span[name=channel_name]').text(orderData.channel_name);
                $('span[name=express_name]').text(orderData.express_name);
                $('span[name=buy_user]').text(orderData.buy_user);
                $('span[name=user_name]').text(orderData.user_name);
                $('span[name=user_mobile]').text(orderData.user_mobile);
                $('span[name=user_address]').text(orderData.user_address);
                $('span[name=zip_code]').text(orderData.zip_code);
                $('span[name=user_remark]').text(orderData.user_remark);
                $('span[name=user_city]').text(orderData.user_city);
                $('span[name=foreign_express_no]').text(orderData.foreign_express_no);
                // 重载数据
                table.reloadData('print_goods_data', {data:goodsData})
                form.val('print_search', {'express_id':pack_data.id})
                getWarehouse(orderData.country_id)
            })
        }

        function getWarehouse(country){
            let data = {
                'country_id':country
            };
            httpRequest("{:sysuri('common/ajax/getWarehouseAbroadList')}", data, 'post', function (info, res_data) {
                let warehouse_list = res_data
                let warehouse_html = '<option value="">请选择</option>'
                layui.each(warehouse_list, function (index, item){
                    warehouse_html += '<option value="'+index+'">'+item+'</option>'
                })
                $('#overseas_warehouse').html(warehouse_html)
                form.render('select', 'print_search')
            })
        }
    });
</script>
<!--图片-->
<script type="text/html" id="imgTpl" >
    <img src="{{ d.image }}" class="preview-all" style="max-width: 40px;max-height: 40px;" data-tips-image data-tips-hover >
</script>
{/block}

